<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>产品类别-列表</title>
<link rel="stylesheet" href="${request.contextPath}/admin_res/layui-admin/frame/layui/css/layui.css">
</head>
<body>

	<form class="layui-form layui-row" action="return false;">
	
	  <div class="layui-col-xs4" style="margin-top: 20px;">
	    <label class="layui-form-label">分类名称</label>
	    <div class="layui-input-block">
	      <input class="layui-input" id="query_category_name" placeholder="分类名称" type="text">
	    </div>
	  </div>
	  
	  <div class="layui-col-xs4" style="margin-top: 20px;">
	    <label class="layui-form-label">状态</label>
	    <div class="layui-input-block">
	      <select id="query_status">
	        <option value="">请选择</option>
	        <option value="1">启用</option>
	        <option value="0">禁用</option>
	      </select>
	    </div>
	  </div>
	  
	  <div class="layui-col-xs4" style="margin-top: 20px;">
	  	<button id="btn_reload" class="layui-btn layui-btn-radius" style="margin-left:65px;" type="button">查询</button>
	  </div>
	  
	</form>
	
	<table id="demo" lay-filter="test"></table>
	
	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="add">新建</button>
    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">修改</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
  </div>
	</script>
	 
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  		<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="tree">树</a>
	</script>
	
	<link rel="stylesheet" href="${request.contextPath}/admin_res/zTree_v3-3.5.33/css/zTreeStyle/zTreeStyle.css">
	<script type="text/javascript" src="${request.contextPath}/admin_res/zTree_v3-3.5.33/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="${request.contextPath}/admin_res/zTree_v3-3.5.33/js/jquery.ztree.all.min.js"></script>

	<script type="text/javascript" src="${request.contextPath}/admin_res/layui-admin/frame/layui/layui.js"></script>
	<script type="text/javascript" src="${request.contextPath}/admin_res/layui-admin/frame/static/js/ldbz_util.js"></script>
	<script>
    layui.use(['table','jquery','laydate'], function(){
      var table = layui.table ;
      
      table.init('demo', {
        height: 'full-10'
        ,limit: 10
      }); 
    
      //第一个实例
      var tableIns = table.render({
        elem: '#demo'
        ,toolbar: '#toolbarDemo'
        ,url: '/admin/category/getCategoryPage' //数据接口
        ,method: 'post'
        ,limit: 10
        ,contentType: 'application/x-www-form-urlencoded'
//         ,where: {
//         	id : 1
//         }
        ,parseData: function(res){ //res 即为原始返回的数据
        	var count = 0 , list = [];
        	if(res && res.data && res.data.total){
        		count =res.data.total ;
        	}
        	if(res && res.data && res.data.list){
        		list =res.data.list ;
        	}
    	    return {
    	      "code": res.status,
    	      "msg": res.msg,
    	      "count": count ,
    	      "data": list
    	    };
    	 }
        ,page: true //开启分页
        ,cols: [[ //表头
          {type: 'checkbox', fixed: 'left'}
          ,{field: 'categoryName', title: '分类', width: 120}
          ,{field: 'categoryLevel', title: '级别', width: 50}
          ,{field: 'status', title: '状态', width: 80 , templet: function(d){
        	  return '<input type="checkbox" disabled lay-skin="switch" lay-text="ON|OFF" ' + ( d.status == 1 ? "checked" : "" ) + '>';
          }}
          ,{field: 'sortOrder', title: '排序', width: 50}
          ,{field: 'id', title: 'ID', hide:true}
          ,{field: 'created', title: '创建时间', width:140 ,templet: function(d){
              if(d.created){
            	  return new Date(d.created).Format("yyyy-MM-dd hh:mm:ss");
          	  }else{
          		  return "";
          	  } 
          }}
          ,{field: 'creator', title: '创建人', width:80}
          ,{field: 'creatorName', title: '创建人', width:80} 
          ,{field: 'updated', title: '修改时间', width: 140 ,templet: function(d){
              if(d.updated){
            	  return new Date(d.updated).Format("yyyy-MM-dd hh:mm:ss");
          	  }else{
          		  return "";
          	  } 
          }}
          ,{field: 'updator', title: '修改人', width: 80}
          ,{field: 'updatorName', title: '修改人', width: 80}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
        ]]
      });
      
      //头工具栏事件
      table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        var data = checkStatus.data;
        switch(obj.event){
          case 'add':
        	  addRec();
          break;
          case 'edit':
        	  if(data.length==1){
        		  editRec(data[0]);
        	  }else{
	          	layer.msg("请选择一条需要修改的记录。");
        	  }
          break;
          case 'del':
        	  if(data.length>0){
        		  layer.confirm('是否确定删除选中行记录', function(index){
			          var ids = $(data).map(function(i , o){ return o.id ; }).get().join(",");
                	  $.post("${request.contextPath}/admin/category/deleteByKey/" + ids , function(ret){
                		  if(ret.data>0 && ret.msg=='OK'){
                			  tableIns.reload('demo');
        			          layer.close(index);
                		  }
                	  });
                  });
        	  }else{
	          	layer.msg("请选择要删除的记录。");
        	  }
          break;
        };
      });
      
      //监听行工具事件
      table.on('tool(test)', function(obj){
        var data = obj.data;
        if(obj.event === 'del'){
          layer.confirm('是否确定删除该行记录', function(index){
        	  $.post("${request.contextPath}/admin/category/deleteByKey/"+data.id, function(ret){
        		  if(ret.data>0 && ret.msg=='OK'){
			          obj.del();
			          layer.close(index);
        		  }
        	  });
          });
        } else if(obj.event === 'edit'){
        	editRec(data);
        } else if(obj.event === 'tree'){
        	showTree(data);
        }
      });
    
      //树状展现
      function showTree(data){
      	$.post("${request.contextPath}/admin/category/getCategoryTree/" + data.id , function(ret){
			    var treeNode = ret.data ;
				var setting = {
					edit: {
						enable: true,
			            showRemoveBtn: function(){return false;},
			            showRenameBtn: function(){return false;},
						drag: {
			                isCopy: false,
			                isMove: true,
			                prev: true,
			                next: true,
			                inner: false
			            }
					},
					data : {
						key : {
							name : "categoryName",
						},
						simpleData : {
							enable : true,
							idKey : "id",
							pIdKey : "fid",
							rootPId : 0
						}
					},
					callback: {
						beforeDrag: beforeDrag,
						beforeDrop: beforeDrop
					}
				};
				
				var dragId  ;
				function beforeDrag(treeId, treeNodes) {
					for (var i=0,l=treeNodes.length; i<l; i++) {
						   dragId = treeNodes[i].fid;
						if (treeNodes[i].drag === false) {
							return false;
						}
					}
					return true;
				}
				function beforeDrop(treeId, treeNodes, targetNode, moveType) {
						  if(targetNode.fid == dragId){
						    return true;
						  }else{
					        return false;
					      }
				}
				
				var treeLayer = layer.open({
				     type: 1,
				     title: '树状节点查看',
				     shadeClose: true,
				     shade: false,
				     maxmin: false, 
				     area: ['320px', '400px'],
				     content: '<ul id="treeDemo" class="ztree"></ul>' +
				         '<button id="btn_save_order" class="layui-btn layui-btn-warm layui-btn-radius" style="position: absolute; top: 80%; left: 35%;">保存排序</button>' ,
				     success: function(){
						var zTree = $.fn.zTree.init($("#treeDemo"), setting, treeNode);
						zTree.expandAll(true);
						$("#btn_save_order").click(function(){
							if(dragId){
								var nodes = zTree.getNodesByParam("fid",dragId );
								var ids = $(nodes).map(function(i , o){
									return o.id ;
								}).get();
								if(ids && ids.length>0){
									updateSort(ids , treeLayer);
								}else{
									layer.msg("未获取到节点");
								}
							}else{
								layer.msg("节点排序未异动。");
							}
						});
				     }
				});
				
		  });
      }
      
      //新建
		function addRec(){
			var add_full = layer.open({
				  type: 2,
				  shade: false,
				  title: "新建",
				  maxmin: false,
				  content: '${request.contextPath}/admin/category/addCategory',
				  success: function(layero){
				    layer.setTop(layero);
				  },
				  end: function () {
					  tableIns.reload('demo');
				  }
				});
			layer.full(add_full);
		}
      
      //修改
	  function editRec(data){
		  var edit_full = layer.open({
			  type: 2,
			  shade: false,
			  title: "编辑",
			  maxmin: false,
			  content: '${request.contextPath}/admin/category/editCategory/' + data.id,
			  success: function(layero){
			    layer.setTop(layero);
			  },
			  end: function () {
				  tableIns.reload('demo');
			  }
			});
		layer.full(edit_full);
      }
      
      $("#btn_reload").click(function(){
          var _status = $("#query_status").val() ;
          var category_name = $("#query_category_name").val() ;
	       table.reload('demo', {
	 	          page: {
	 	            curr: 1 //重新从第 1 页开始
	 	          }
	       		  ,coverWhere : true//覆盖之前的参数
	 	          ,where: {
	 	        	  status : _status ,
	 	        	 categoryName : category_name
	 	          }
	 	    });
    	  
      });
      
    });
    
    //修改排序
    function updateSort(ids , obj){
    	$.post("${request.contextPath}/admin/category/updateSort" , {
    		'ids' : ids.join(',')
    	} , function(ret){
			if(ret && ret.status==200){
				layer.close(obj);
				layer.msg("保存成功。");
			}
    	});
    }
    </script>
</body>
</html>